<template>
    <div class="main">
        <el-input v-model="inputVal" :disabled="true">
            <template #prepend>绑定邮箱</template>
        </el-input>
        <div class="code-box">
            <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm">
                <el-form-item prop="code">
                    <el-input v-model="ruleForm.code" min="6" maxlength="6" placeholder="请输入验证码" />
                </el-form-item>
            </el-form>
            <button class="codeBtn" @click="getCode" :disabled="disable">{{ countDownString }}</button>
        </div>
        <div class="next-box">
            <span v-show="type === 'email'" class="next" @click="nextStep()">
                邮箱不可用?
            </span>
        </div>
        <el-button type="primary" @click="next">下一步</el-button>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/index.js';
import { getEncryptionInfo } from '@/Util'
import axios from 'axios';
import type { FormInstance, FormRules } from 'element-plus'
import { storeToRefs } from 'pinia';
let { nextStep, type } = defineProps<{
    nextStep: Function,
    type: string
}>()
const User = useUserStore()
let { user } = storeToRefs(User);
let { username, email } = user.value
let ruleFormRef = ref<FormInstance>()
let disable = ref<boolean>(false)
let inputVal = ref(getEncryptionInfo('email', user.value.email))
let ruleForm = reactive({
    code: ''
})
const rules = reactive<FormRules>({
    code: [{ required: true, message: '验证码不能为空', trigger: 'blur' },
    { min: 6, message: '验证码长度为6位', trigger: 'blur' },
    { pattern: /\d/, message: '验证码必须为数字', trigger: 'blur' },
    ]
})
let countDown = ref(60)
let countDownString = computed(() => {
    if (disable.value) {
        return countDown.value + '秒后获取'
    }
    return '获取验证码'
})
let getCode = async () => {
    disable.value = true
    let timer = setInterval(() => {
        countDown.value--
        if (!countDown.value) {
            disable.value = false
            clearInterval(timer)
        }
    }, 1000)
    let { data } = await axios.get(`code?username=${username}&email=${email}`)
    if (data) {
        let isSuccess = data.code == '0000'
        ElMessage({
            type: isSuccess ? 'success' : 'error',
            message: data.msg
        })
    }
}
let next = () => {
    ruleFormRef.value?.validate(async (v) => {
        if (v) {
            let { data } = await axios.post('code/validate', {
                username,
                code: ruleForm.code
            })
            if (data.code == '0000') {
                ElMessage.success(data.msg);
                nextStep();
                return
            }
            ElMessage.error(data.msg);
        }
    })
}
</script>


<style scoped lang="less">
.main {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    &>* {
        margin-bottom: 20px;
    }

    .code-box {
        display: flex;
        max-height: 30px;

        .codeBtn {
            font-size: 14px;
            width: 120px;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            margin-left: 5px;
            cursor: pointer;
            color: #5c5555;
            user-select: none;
            background-color: #fff;

            &:disabled {
                background-color: #f5f5f5;
                color: #c1bdbe;
            }

            &:hover {
                background-color: #f5f7fa;
            }
        }
    }

    .next-box {
        position: absolute;
        top: 78px;
        right: 0;
        text-align: right;

        .next {
            height: 12px;
            font-size: 12px;
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }
    }

}
</style>